<template>
	<div class="widget">
		<li class="widget-item">
			<p class="widget-title">标题</p>
			<el-input type="text" class="val" size="mini" @blur="commitData" v-model="formData.title" />
		</li>
		<div class="widget-item">
			<!-- <p class="widget-title-big">选择作战单元</p> -->
			<br />
		</div>
		<li class="widget-item">
			<p class="widget-title">作战单元</p>
			<!-- <el-select v-model="formData.unit" class="widget-select"  @change="commitData"  size="mini" :popper-append-to-body="false"
                popper-class="select-popper" placeholder="请选择">
                <el-option v-for="item in units" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select> -->
			<el-input type="text" class="val" size="mini" @blur="commitData" v-model="formData.unit" />
		</li>
	</div>
</template>
<script>
export default {
	data() {
		return {
			formData: {},
			units: [],
		};
	},
	props: ["data"],
	watch: {
		data(val) {
			console.log("data", val);
		},
	},
	methods: {
		commitData() {
			let content = JSON.parse(JSON.stringify(this.formData));
			this.$EventBus.$emit("defaultValue", content);
		},
		getUnits() {
			this.units = [
				{ label: "飞行编队1", value: "formation1" },
				{ label: "飞行编队2", value: "formation2" },
				{ label: "无人艇1", value: "ship1" },
				{ label: "无人艇2", value: "ship2" },
				{ label: "无人艇3", value: "ship3" },
				{ label: "无人艇4", value: "ship4" },
			];
		},
	},
	mounted() {
		if (this.data) {
			if (typeof this.data == "object") {
				let data = JSON.parse(JSON.stringify(this.data));
				this.formData = data;
			} else this.formData = JSON.parse(this.data);
		}
		this.getUnits();
	},
};
</script>

<style lang="less" scoped>
.val {
	width: 180px;
}
</style>
